<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a{
            border: 1px,pink,solid;
            width: 100%;
        }
        .image-container {
          
            border: 1px red solid ;
            width: 50%;
        }
     
    </style>
</head>

<body>
    <div id="id">我是</div>
    <img src="" alt="">
    <div id="imageContainer" class="image-container">
        <img src="" alt="将要被动态添加的风景图片">
    </div>
    <input id="username" type="text">
    <!-- 事件的捕获和冒泡 -->
        <script>
            let img1=document.querySelector('#imageContainer img');
            img1.src='https://picsum.photos/600/400?nature'
            img1.alt= '美丽的自然风景图片'
            console.log("img1")
            // img1.classList.add("a")
             img1.classList.add("image-container")
            console.log(img1.classList.contains("a"))
let div=document.getElementById("id")
div.addEventListener("click",()=>{
    console.log("1212")
    div.classList.toggle("a")
})
img1.addEventListener("click",()=>{
    console.log("1212")
    img1.classList.toggle("a")
})
div.addEventListener("keydown",(event)=>{
  console.log("按下",event.key,event.code)
})
div.addEventListener("keyup",(event)=>{
  console.log("抬起",event.key,event.code)
})
img1.addEventListener("mouseenter",()=>{
    console.log("enter")
})
img1.addEventListener("mousemove",()=>{
    console.log("move") 
})
img1.addEventListener("mouseleave",()=>{
    console.log("moveleave") 
})
let username=document.getElementById("username")
// username.addEventListener("input",(event)=>{
//     console.log(event.target.value) 
// })
username.addEventListener('input', function() {
            // console.clear(); // 清除之前的内容
            console.log('当前输入值:', this.value);
})
 </script>
</body>

</html>